<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      style="width: 700px"
      label-width="100px"
    >
      <el-form-item label="门店名称" prop="offline_name">
        <el-input v-model="form.offline_name"></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
        <div
          id="container"
          style="width: 100%; height: 300px; border: 1px solid black"
        ></div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="form.province"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="form.district"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="form.longitude"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="form.latitude"></el-input>
      </el-form-item>
      <el-form-item label="负责人姓名" prop="user_name">
        <el-input v-model="form.user_name"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">新增门店</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
// 引入地图模块
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      form: {
        latitude: "",
        longitude: "",
        district: "",
        city: "",
        province: "",
        address: "",
        offline_name: "",
        aid: "",
        user_name: "",
        phone: "",
      },
      rules: {
        latitude: { required: true, message: "必填", trigger: "blur" },
        longitude: { required: true, message: "必填", trigger: "blur" },
        district: { required: true, message: "必填", trigger: "blur" },
        city: { required: true, message: "必填", trigger: "blur" },
        province: { required: true, message: "必填", trigger: "blur" },
        address: { required: true, message: "必填", trigger: "blur" },
        offline_name: { required: true, message: "必填", trigger: "blur" },
        user_name: { required: true, message: "必填", trigger: "blur" },
        phone: { required: true, message: "必填", trigger: "blur" },
      },
      map: null, //保存地图对象
      marker: null, //当期选中的坐标点
    };
  },
  methods: {
    // 点击后上传数据**********新增门店地址顺序
    onSubmit() {
      // 验证规则
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$http.storeApi.add(this.form).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "新增门店成功",
              });
            }
            // this.$router.push("/home/cinema-list");
          });
        }
      });
    },
    // 完成逆地理查询
    getAddress(AMap, position) {
      let geocoder = new AMap.Geocoder();
      geocoder.getAddress(position, (status, result) => {
        // console.log(status, result);
        // 回填表单字段
        let r = result.regeocode;
        this.form.address = r.formattedAddress;
        this.form.latitude = position[0];
        this.form.longitude = position[1];
        this.form.district = r.addressComponent.district;
        this.form.city = r.addressComponent.city;
        this.form.province = r.addressComponent.province;
        // this.form.offline_name = r.addressComponent.offline_name;
      });
    },
  },
  // 页面挂载完毕后加载地图数据
  mounted() {
    // 加载地图
    window._AMapSecurityConfig = {
      securityJsCode: "157c3934e402a62d5d9a3bf1d4011a71",
    };
    AMapLoader.load({
      key: "4e71ae72dfe61934fb4fd6fc294045a2", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        this.map = new AMap.Map("container");
        this.map.setCenter([114.057939, 22.543527]);
        this.map.setZoom(15);
        // 为地图绑定事件
        this.map.on("click", (ev) => {
          let { lng, lat } = ev.lnglat;
          // console.log({ lng, lat });
          // 添加一个点标记
          if (this.marker) {
            this.marker.setPosition([lng, lat]);
          } else {
            this.marker = new AMap.Marker({
              position: [lng, lat],
            });
            this.map.add(this.marker);
          }

          // 通过该经纬度，获取对应到的详细位置字符串描述
          // 需要访问高德地图的web服务
          this.getAddress(AMap, [lng, lat]);
        });
      })
      .catch((e) => {
        // console.log(e);
      });
  },
};
</script>
  
  <style lang="scss" scoped>
button {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff !important;
}
</style>